<template>
  <div class="home">
    <!-- 轮播图 -->
    <el-carousel height="300px">
      <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
        <img :src="item.image" :alt="item.alt" class="carousel-image" />
      </el-carousel-item>
    </el-carousel>

    <!-- 快速链接 -->
    <div class="quick-links">
      <el-button type="primary" @click="goToProductList">浏览商品</el-button>
      <el-button type="success" @click="goToCart">查看购物车</el-button>
    </div>

    <!-- 推荐商品 -->
    <div class="recommend-section">
      <h2>今日推荐</h2>
      <el-row :gutter="20">
        <el-col :span="8" v-for="product in recommendedProducts" :key="product.id">
          <el-card :body-style="{ padding: '10px' }">
            <img :src="product.image" alt="Product Image" class="product-image" />
            <h3 class="product-name">{{ product.name }}</h3>
            <p class="product-price">价格: {{ product.price }} 元</p>
            <router-link :to="`/products/${product.id}`" class="product-detail-link">查看详情</router-link>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import iPhoneImage from '../assets/iPhone16.jpg';
import oppoImage from '../assets/oppofindx8.png';
import samsungImage from '../assets/Samsung_GALAXYS_24.jpg';

export default {
  data() {
    return {
      carouselItems: [
        { image: oppoImage, alt: 'OPPO Find X8' },
        { image: iPhoneImage, alt: 'iPhone 16' },
        { image: samsungImage, alt: 'Samsung Galaxy S24' },
      ],
      recommendedProducts: [
        { id: 1, name: 'iPhone 16', price: 5999, image: iPhoneImage },
        { id: 2, name: 'OPPO Find X8', price: 4999, image: oppoImage },
        { id: 3, name: 'Samsung Galaxy S24', price: 6999, image: samsungImage },
      ],
    };
  },
  methods: {
    goToProductList() {
      this.$router.push('/products');
    },
    goToCart() {
      this.$router.push('/cart');
    },
  },
};
</script>

<style>
.home {
  padding: 20px;
}

.carousel-image {
  width: 100%; /* 确保图片宽度填满 */
  height: 300px; /* 固定高度 */
  object-fit: contain; /* 显示完整图片并保持比例 */
  background-color: #f9f9f9; /* 设置背景颜色以补充空白部分 */
}

.quick-links {
  text-align: center;
  margin: 20px 0;
}

.quick-links .el-button {
  margin: 0 10px;
}

.recommend-section {
  margin-top: 30px;
}

.recommend-section h2 {
  font-size: 24px;
  text-align: center;
  margin-bottom: 20px;
  color: black;
}

.product-image {
  width: 100%;
  height: 150px;
  object-fit: contain;
  background-color: #f9f9f9;
}

.product-name {
  font-size: 18px;
  margin: 10px 0 5px;
  text-align: center;
}

.product-price {
  text-align: center;
  font-size: 16px;
  margin-bottom: 10px;
}

.product-detail-link {
  display: block;
  text-align: center;
  color: #409eff;
}
</style>
